<template>
    <div id="communtiyInfo" :style="`height:${height}`">

        <div class="info_content">
          <div class="image_head">
                <van-image
                    round
                    width="60"
                    height="60"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </div>
            <div class="list_content">
                <div class="nick_date">
                <span>海绵宝宝</span>
                <span style="color: rgb(137, 126, 126);margin-top: 1rem;">20120-3-19</span>
                </div>
                <p style="font-size:13px">白白长着一身洁白的毛儿，当它蹲立不动时，远望就像一大块白石头。那双又黑又亮的大眼睛，配着小小的鼻子和嘴巴，多么可爱的小狗狗哇！四只短却很壮的小腿，跑起来总是那么快。那条小尾巴总是不停地摇着，好像永远也不知道疲倦似的。 </p>
                <div class="img_list">
                 <van-grid border="true" :column-num="3">
                    <van-grid-item @click="BigImg">
                        <van-image src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2038406380,317017081&fm=5"  />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=416160078,4249346239&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2152435263,329091142&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=598069525,3705173246&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1067412999,107277101&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2300875363,445064071&fm=5" />
                    </van-grid-item>
                </van-grid>
                </div>
                <div class="button_list">
                    <van-button  icon="chat-o" type="primary" size="mini" @click="openFiled">12</van-button>
                    <van-button icon="good-job-o" type="primary" size="mini" @click="liked">{{Cucount}}</van-button>
                </div>
            </div>
    </div>
        <div class="bottom">
            <van-field
                v-model="message"
                rows="2"
                autosize
                label="评论"
                type="textarea"
                maxlength="50"
                placeholder="请输入评论"
                show-word-limit
                v-show="isShowFiled"
                border="2"
            >
            <van-button slot="button" size="small" type="primary">评论</van-button>
            </van-field>
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
            评论
        </van-divider>
        <div class="list">
            <ul v-for="(data,index) in dataList" :key="index">
                <li class="list_item"><div style="color: black; font-size: 16px;width: 150px;">海绵宝宝：</div> 
                    <div style="font-size:13px;margin-top:.6rem">我喜欢这段话，生活就是这样，生活像一把无情刻刀，改变了我们模样</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            message:'',
            isShowFiled:false,
            height:'',
            dataList:[1,2,3,4,5,65,7,8,9,9]
        }
    },
    methods:{
        openFiled(){
            this.isShowFiled=!this.isShowFiled
        },
        getHeight(){
            this.height = window.innerHeight+"px";
        }
    },
    created(){
        this.getHeight()
    }
}
</script>

<style scoped>
.info_content{
    background: white;
    width: 100%;
    display: flex;
}
.list_content{
    margin:.6rem
}
#communtiyInfo{
    background: white;
    width: 100%;
     overflow-y: scroll;
}
.list{
    margin-left: 2rem;
    color: #85acf5;
}
.list_item{
    display: flex;
}

</style>